
<template>
  <div class="block">
    <span class="demonstration">{{ label }}</span>
    <el-date-picker
      v-model="value"
      @change="dateClick"
      :type="type"
      align="right"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      :format="format"
      :value-format="valueFormat"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
<script>

export default {
    name: "DateRange",
    data() {
        return {
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          value: ''
        };
    },
    props:['type', 'label', 'format', 'valueFormat'],
    watch: {

    },
    created(){

    },
    mounted() {
        console.log('时间插件  --  dom完成');
    },
    methods: {
        dateClick(value){
          console.log('shijianxuanzhong : ', value)
          this.$emit("select-date-range", {date: value})
        }
    },
    
   
};
</script>
<style scoped>
/* .treeBox {
  width: 200px;
} */
</style>

